<template>
  <div class="autumn-scroll">
    <better-scroll
            :probe-type="3"
            ref="betScroll"
            :data="autumnData.clothes"
    >
      <div class="autumn">
        <div class="contents">
          <div class="autumu-title">
            <div class="line"></div>
            <div class="title">{{autumnData.title}}</div>
            <div class="line"></div>
          </div>
          <div class="autumn-img" v-for="(item,index) in autumnData.clothes" :key="item.id">
            <img :src="item.backImg" alt="" @load="backImgLoad">
          </div>
        </div>
      </div>
    </better-scroll>
  </div>
</template>

<script>
  import axios from 'axios';
  import BetterScroll from "components/common/betterScroll/BetterScroll";
  import {Debounce} from "common/util";

  export default {
    name: "autumn",
    components: {
      BetterScroll
    },
    data() {
      return {
        autumnData: {},
      };
    },
    created() {
      this.getNextWork();
    },
    methods: {
      getNextWork() {
        axios.get("/apis/autumn").then(res => {
          this.autumnData = res.data.data;
        });
      },
      getImage() {
        this.autumnData.clothes.forEach((item) => {
          item.backImg = require('~' + item.backImg + '.jpg');
        });
      },
      backImgLoad() {
        var debounces = Debounce(this.$refs.betScroll.refresh, 50);

        debounces();
      }
    },
    watch: {
      autumnData(val,oldVal) {
        val.clothes.forEach((item) => {
          item.backImg = require('assets/images/autumn/' + item.backImg + '.jpg');
        });
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .autumn-scroll
    .wrapper
      z-index 9999;
      position: fixed;
      left 0;
      top 0;
      right 0;
      bottom 0;
      z-index 999;
      overflow hidden;
      background-color #ffffff;
    .autumn
      background-color #ffffff;
      width 100%;
      height 100%;
      .contents
        flex 1;
        width 100%;
        height 100%;
        padding-top 33px;
        .autumu-title
          display flex;
          width 80%;
          margin 0 auto;
          text-align center
          height 50px;
          line-height 50px;
          .line
            border-bottom 1px solid red;
            display inline-block;
            position relative;
            top -25px;
            flex 1;
          .title
            padding 0 12px;
            font-size 16px;
            font-weight bold;
            color #333333;
        .autumn-img
          width 100%;
          img
            width 100%;
</style>